<template>
	<view class="page-box">
		<view class="flex menu-box">
			<view v-for="(item,index) in list.children" @click="handletabList(item,index)" :key="item.id"
				class="menu columnY centerXY">
				<my-image radius="10rpx" :src="item.cover" errText="" width="100rpx" height="100rpx"></my-image>
				<view class="color-text mar-top-10 font-24 menu-text" :class="index == tabs ? 'on':''">{{item.name}}
				</view>
			</view>
		</view>

		<view class="banner-box pad-30">
			<view class="banner-list" v-for="item in childrenList" :key="item.id" @click="hanldeServiceInfo(item)">
				<my-image :src="item.cover" width="100%" height="360rpx"></my-image>
				<view class="centerY pad-30 betweenX">
					<view>
						<view class="font-30 color-text">{{item.name}}</view>
						<view class="font-28 mar-top-10 color-error">
							<text v-if="item.min_price">￥{{item.min_price}}元</text>
							<text v-if="item.unit">/{{item.unit}} </text>
						</view>
						<view class="button-style button-w mar-top-20">马上预约</view>
					</view>

				</view>

			</view>
		</view>
		<suspend icon="/static/image/service.jpg"></suspend>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { workAll } from '@/api/index.js'
	import { onLoad, onShareAppMessage } from '@dcloudio/uni-app'
	import util from '@/util/share.js'
	import { dataReportFun } from '@/util/dataReport.js'

	// 分享
	onShareAppMessage(() => {
		return util.onShare({
			path: `/pages/homeService/homeService?code=${props.value.code}`
		})
	})

	// 获取页面总数据
	const list = ref([])
	// 切换详情子数据
	let childrenList = ref([])
	const getTreeList = async () => {
		let res = await workAll();
		list.value = res.data.tree.find(item => item.code == props.value.code);
		uni.setNavigationBarTitle({
			title: list.value.name
		})
		childrenList.value = list.value?.children[0]?.children;
	}

	const tabs = ref(0);
	const handletabList = (item, index) => {
		tabs.value = index;
		if (item?.children) {
			childrenList.value = item.children;
		}
	}

	// 跳转详情页面
	const hanldeServiceInfo = (item) => {
		uni.navigateTo({
			url: `/pages/serviceInfo/serviceInfo?id=${item.id}`
		})
	}

	// 接收参数
	const props = ref({});
	onLoad((option) => {
		if (option) {
			props.value = option;
			getTreeList();
		}
		dataReportFun({
			event: "client.page_view",
		})
	});
</script>

<style scoped lang="scss">
	.button-w {
		width: 160rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		font-size: 28rpx;
	}

	.banner-box {
		// background: #F4F6F8;
		margin-top: 30rpx;
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	.banner-list {
		width: calc(50% - 12rpx);
		border-radius: 30rpx;
		overflow: hidden;
		background: white;
		margin-bottom: 40rpx;
		box-sizing: border-box;
	}

	.banner-bg {
		display: block;
		width: 100%;
		height: 360rpx;
	}

	.menu-box {
		flex-wrap: wrap;
	}

	.menu {
		width: 187rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
	}

	.menu-text {
		padding: 8rpx 15rpx;
	}

	.menu-icon {
		width: 100rpx;
		height: 100rpx;
	}

	.on {
		background: $uni-color-primary;
		color: #fff;
		border-radius: 30rpx;
	}
</style>